<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>试题管理</title>
    <link rel="stylesheet" href="static/index.css">
    <script src="static/vue@2.6.14.js"></script>
    <script src="static/index.js"></script>
    <script src="static/axios.min.js"></script>
    <style>
        .container {
            padding: 20px;
            max-width: 1400px;
            margin: 0 auto;
        }

        .toolbar {
            margin-bottom: 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .question-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(500px, 1fr));
            gap: 24px;
        }

        .question-card {
            border: 1px solid #EBEEF5;
            border-radius: 8px;
            padding: 20px;
            box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
            background: #fff;
            transition: all 0.3s ease;
        }

        .question-card:hover {
            box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.1);
        }

        .question-title {
            font-size: 16px;
            color: #303133;
            margin-bottom: 20px;
            border-bottom: 1px solid #EBEEF5;
            padding-bottom: 12px;
            line-height: 1.4;
        }

        .question-options {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            grid-template-rows: repeat(2, 1fr);
            gap: 16px;
            margin-bottom: 20px;
        }

        .option-item {
            padding: 12px;
            border: 1px solid #EBEEF5;
            border-radius: 4px;
            background: #F8F9FA;
        }

        .option-item:hover {
            background: #F2F6FC;
        }

        .question-footer {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 16px;
            padding-top: 16px;
            border-top: 1px dashed #EBEEF5;
        }

        .tags-group {
            display: flex;
            gap: 8px;
            flex-wrap: wrap;
        }

        .actions-group {
            display: flex;
            gap: 8px;
        }

        /* 调整el-button small尺寸的样式 */
        .el-button--small {
            padding: 8px 15px;
            font-size: 12px;
        }

        /* 分页器样式优化 */
        .pagination-container {
            margin-top: 32px;
            display: flex;
            justify-content: center;
        }
    </style>
</head>
<body>
<div id="app" class="container">
    <div class="toolbar">
        <el-button type="primary" size="small" @click="showAddDialog">添加试题</el-button>
        <el-input
                v-model="searchKeyword"
                placeholder="搜索试题"
                size="small"
                style="width: 200px;"
                @input="handleSearch">
        </el-input>
    </div>

    <div class="question-grid">
        <div v-for="question in questions" :key="question.questionId" class="question-card">
            <div class="question-title">{{question.title}}</div>
            <div class="question-options">
                <div class="option-item">
                    <el-radio label="A" disabled>A. {{question.optionA}}</el-radio>
                </div>
                <div class="option-item">
                    <el-radio label="B" disabled>B. {{question.optionB}}</el-radio>
                </div>
                <div class="option-item">
                    <el-radio label="C" disabled>C. {{question.optionC}}</el-radio>
                </div>
                <div class="option-item">
                    <el-radio label="D" disabled>D. {{question.optionD}}</el-radio>
                </div>
            </div>
            <div class="question-footer">
                <div class="tags-group">
                    <el-tag size="small" type="success">正确答案: {{question.correctAnswer}}</el-tag>
                    <el-tag size="small" type="info">分值: {{question.score}}分</el-tag>
                    <el-tag size="small" type="info">创建时间: {{formatTime(question.createTime)}}</el-tag>
                </div>
                <div class="actions-group">
                    <el-button type="primary" size="small" @click="handleEdit(question)">编辑</el-button>
                    <el-button type="danger" size="small" @click="handleDelete(question)">删除</el-button>
                </div>
            </div>
        </div>
    </div>

    <div class="pagination-container">
        <el-pagination
                @current-change="handlePageChange"
                :current-page="currentPage"
                :page-size="pageSize"
                :total="total"
                layout="total, prev, pager, next"
                background>
        </el-pagination>
    </div>

    <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="50%">
        <el-form :model="currentQuestion" ref="questionForm" label-width="80px">
            <el-form-item label="题目" prop="title"
                          :rules="[{required: true, message:'请输入题目'}]">
                <el-input v-model="currentQuestion.title" type="textarea" rows="3"></el-input>
            </el-form-item>
            <el-form-item label="选项A" prop="optionA"
                          :rules="[{required: true, message:'请输入选项A'}]">
                <el-input v-model="currentQuestion.optionA"></el-input>
            </el-form-item>
            <el-form-item label="选项B" prop="optionB"
                          :rules="[{required: true, message:'请输入选项B'}]">
                <el-input v-model="currentQuestion.optionB"></el-input>
            </el-form-item>
            <el-form-item label="选项C" prop="optionC"
                          :rules="[{required: true, message:'请输入选项C'}]">
                <el-input v-model="currentQuestion.optionC"></el-input>
            </el-form-item>
            <el-form-item label="选项D" prop="optionD"
                          :rules="[{required: true, message:'请输入选项D'}]">
                <el-input v-model="currentQuestion.optionD"></el-input>
            </el-form-item>
            <el-form-item label="正确答案" prop="correctAnswer"
                          :rules="[{required: true, message:'请选择正确答案'}]">
                <el-select v-model="currentQuestion.correctAnswer" size="small">
                    <el-option label="A" value="A"></el-option>
                    <el-option label="B" value="B"></el-option>
                    <el-option label="C" value="C"></el-option>
                    <el-option label="D" value="D"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="分值" prop="score"
                          :rules="[
                                 {required: true, message:'请输入分值'},
                                 {pattern: /^[1-9]\d*$/, message:'请输入正整数'}
                             ]">
                <el-input v-model="currentQuestion.score" placeholder="请输入分值" size="small"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer">
            <el-button size="small" @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" size="small" @click="handleSave">确 定</el-button>
        </div>
    </el-dialog>
</div>

<script>
    new Vue({
        el: '#app',
        data() {
            return {
                searchKeyword: '',
                questions: [],
                currentPage: 1,
                pageSize: 10,
                total: 0,
                dialogVisible: false,
                dialogTitle: '添加试题',
                currentQuestion: {
                    questionId: null,
                    title: '',
                    optionA: '',
                    optionB: '',
                    optionC: '',
                    optionD: '',
                    correctAnswer: '',
                    score: 5,
                    createTime: null
                },
                isEdit: false
            }
        },
        methods: {
            formatTime(time) {
                if (!time) return '';
                return new Date(time).toLocaleString();
            },
            fetchQuestions() {
                axios.get('/question?operation=findPage', {
                    params: {
                        keyword: this.searchKeyword,
                        pageNum: this.currentPage,
                        pageSize: this.pageSize
                    }
                }).then(response => {
                    const {code, data} = response.data;
                    if (code === 200) {
                        this.questions = data.list;
                        this.total = data.total;
                    }
                }).catch(error => {
                    this.$message.error('获取试题列表失败');
                    console.error(error);
                });
            },
            handleSearch() {
                this.currentPage = 1;
                this.fetchQuestions();
            },
            handlePageChange(page) {
                this.currentPage = page;
                this.fetchQuestions();
            },
            showAddDialog() {
                this.isEdit = false;
                this.dialogTitle = '添加试题';
                this.currentQuestion = {
                    questionId: null,
                    title: '',
                    optionA: '',
                    optionB: '',
                    optionC: '',
                    optionD: '',
                    correctAnswer: '',
                    score: 5,
                    createTime: null
                };
                this.dialogVisible = true;
            },
            handleEdit(question) {
                this.isEdit = true;
                this.dialogTitle = '编辑试题';
                this.currentQuestion = JSON.parse(JSON.stringify(question));
                this.dialogVisible = true;
            },
            handleDelete(question) {
                this.$confirm('确认删除该试题?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    axios.post('/question?operation=delete&questionId='+question.questionId).then(response => {
                        if (response.data.code === 200) {
                            this.$message.success('删除成功');
                            this.fetchQuestions();
                        }
                    }).catch(error => {
                        this.$message.error('删除失败');
                        console.error(error);
                    });
                });
            },
            handleSave() {
                this.$refs.questionForm.validate(valid => {
                    if (valid) {
                        const url = this.isEdit ? '/question?operation=update' : '/question?operation=add';
                        axios.post(url, {
                            ...this.currentQuestion
                        }).then(response => {
                            if (response.data.code === 200) {
                                this.$message.success(this.isEdit ? '更新成功' : '添加成功');
                                this.dialogVisible = false;
                                this.fetchQuestions();
                            }
                        }).catch(error => {
                            this.$message.error(this.isEdit ? '更新失败' : '添加失败');
                            console.error(error);
                        });
                    }
                });
            }
        },
        mounted() {
            this.fetchQuestions();
        }
    });
</script>
</body>
</html>